<!-- 业绩确认报表 -->
<template>
  <div class="performance-rpt">
    <div class="search">
      <div>
        <span>签约日期：</span>
        <DatePicker v-model="date" @on-change="onChange" type="daterange" placeholder="选择签约日期"
          style="width: 210px;"></DatePicker>
        <Button type="primary" style="margin-left: 16px;" @click="onSearch">查询</Button>
      </div>
      <div>
        <Button v-if="unlocking('0110010100')" type="primary"
          @click="onDownload">导出excel</Button>
        <Button type="primary" class="aciton" style="margin-left:10px;"> <a
            href="https://images.tospurfang.com/doc/%E4%B8%9A%E7%BB%A9%E7%A1%AE%E8%AE%A4%E6%8A%A5%E8%A1%A8%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
            style="color:#fff;" target="_blank">查看操作指引</a>
        </Button>
      </div>
    </div>

    <Table ref="TableHeight" border :max-height="onresizeHeight" :columns="columns"
      :data="list"></Table>
    <page :pageData="pageData" @pageOnChangeFun="pageOnChangeFun"
      @pageOnPageSizeChangeFun="pageOnPageSizeChangeFun"></page>
  </div>
</template>

<script>
  import toolMgr from '@/biz/base/tool.js'
  import performanceMgr from '@/biz/caseReport/performance.js'

  export default {
    components: {},
    data() {
      return {
        onresizeHeight: 300,
        columns: [
        {
          title: '客户姓名',
          key: 'customerName',
          minWidth: 130,
        },
        {
          title: '房源名称',
          key: 'roomName',
          minWidth: 180,
        },
        {
          title: '认购日期',
          key: 'subscriptionDate',
          minWidth: 130,
        },
        {
          title: '签约日期',
          key: 'contractDate',
          minWidth: 130,
        },
        {
          title: '面积(m²)',
          key: 'area',
          minWidth: 120,
        },
        {
          title: '签约单价(元)',
          key: 'unitPrice',
          minWidth: 130,
          render: (h, params) => {
            return h('p', Number(params.row.unitPrice).toLocaleString())
          }
        },
        {
          title: '签约总价(元)',
          key: 'totalPrice',
          minWidth: 150,
          render: (h, params) => {
            return h('p', Number(params.row.totalPrice).toLocaleString())
          }
        },
        {
          title: '全款到账日期',
          key: 'predictAccountDate',
          minWidth: 130,
        }, ],
        date: [],
        list: [],
        pageData: {
          total: 0,
          current: 1,
          rows: 50,
          pageSizeOpts: [50, 40, 30, 20, 10],
        },
        housesId: this.$dt.buildInfo().housesId
      }
    },
    created() {
      this.$nextTick(() => {
        this.onresizeHeight =
          window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 70
      })
    },
    mounted() {
      this.getList()
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight = window.innerHeight - this.$refs.TableHeight.$el
              .offsetTop - 70
          }, 10)
        })()
      }
    },
    methods: {
      getList() {
        performanceMgr.list({
          page: this.pageData.current,
          rows: this.pageData.rows,
          housesId: this.housesId,
          startTime: this.date[0],
          endTime: this.date[1]
        }).then(res => {
          this.list = [...res.list]
          this.pageData.total = res.total
        })
      },
      onSearch() {
        this.getList()
      },
      // 导出
      onDownload() {
        toolMgr.downloadCenter(
          '/dt-order/statistics/exportPerformanceConfirmation',
          {
            housesId: this.housesId,
            startTime: this.date[0],
            endTime: this.date[1]
          }
        )
      },
      onChange(val) {
        this.date = this.$dt.tool.handleDateRange(val) 
      },
      // 分页 页码改变事件
      pageOnChangeFun(current) {
        this.getList()
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.getList()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .performance-rpt {
    padding: 20px;

    .search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
  }
</style>